<template>
	<div class="components-container">
		<code
		>This is based on
			<a
					class="link-type"
					href="//github.com/dai-siki/vue-image-crop-upload"
			>
				vue-image-crop-upload</a
			>.
		 {{ $t('components.imageUploadTips') }}
		</code>

		<pan-thumb :image="image"/>

		<el-button
				@click="imagecropperShow = true"
				icon="upload"
				style="position: absolute; bottom: 15px; margin-left: 40px"
				type="primary"
		>Change Avatar
		</el-button>

		<image-cropper
				:height="300"
				:key="imagecropperKey"
				:width="300"
				@close="close"
				@crop-upload-success="cropSuccess"
				lang-type="en"
				url="https://httpbin.org/post"
				v-show="imagecropperShow"
		/>
	</div>
</template>

<script>
	import ImageCropper from '@/components/ImageCropper';
	import PanThumb from '@/components/PanThumb';

	export default {
		name: 'AvatarUploadDemo',
		components: {ImageCropper, PanThumb},
		data() {
			return {
				imagecropperShow: false,
				imagecropperKey: 0,
				image:
						'https://wpimg.wallstcn.com/577965b9-bb9e-4e02-9f0c-095b41417191',
			};
		},
		methods: {
			cropSuccess(resData) {
				this.imagecropperShow = false;
				this.imagecropperKey = this.imagecropperKey + 1;
				this.image = resData.files.avatar;
			},
			close() {
				this.imagecropperShow = false;
			},
		},
	};
</script>

<style scoped>
	.avatar {
		width: 200px;
		height: 200px;
		border-radius: 50%;
	}
</style>

